<template>
  <div class="top-record">
    <el-table
      :data="listData"
      cell-class-name="custom-row"
      header-row-class-name="custom-row"
      header-cell-class-name="custom-header"
      :empty-text="loading ? '数据加载中' : '暂无数据'"
    >
      <el-table-column label="目标饰品" prop="target_skin_name"></el-table-column>
      <el-table-column label="获得饰品" prop="item_name" min-width="100"></el-table-column>

      <el-table-column label="升级概率">
        <template #default="scope">{{ scope.row.range }}%</template>
      </el-table-column>

      <el-table-column label="落点值" prop="point"></el-table-column>

      <el-table-column label="花费" align="center" prop="amount">
        <template v-slot="scope">
          <div class="d-flex align-center justify-center">
            <!-- <img src="@/static/img/icon/diamonds.png" class="mr-1" /> -->
            {{ scope.row.amount }}
          </div>
        </template>
      </el-table-column>

      <el-table-column label="状态">
        <template #default="scope">
          <span class="status-success" v-if="scope.row.is_success">升级成功</span>
          <span class="status-fail" v-else>升级失败</span>
        </template>
      </el-table-column>

      <el-table-column label="升级时间" align="center" width="160">
        <template
          v-slot="scope"
        >{{ $dayjs.unix(scope.row.updated_at).format("YYYY-MM-DD HH:mm:ss") }}</template>
      </el-table-column>
    </el-table>

    <v-spacer></v-spacer>

    <div class="pagination-wrapper mt-3 pb-3">
      <el-pagination
        v-model:page-size="query.page_size"
        :total="total"
        v-model:current-page="query.page"
        @current-change="fetch"
        hide-on-single-page
      ></el-pagination>
    </div>
  </div>
</template>

<script lang="ts">
import TopService from "@/services/TopService";
import { UserRetrievRecord } from "@/types";
import { defineComponent, reactive, ref } from "vue";

export default defineComponent({
  setup() {
    const listData: UserRetrievRecord[] = [];

    return {
      query: reactive({
        page: 1,
        page_size: 10,
        keyword: "",
        is_success: -1,
      }),
      listData: ref(listData),
      total: ref(0),
      loading: ref(false),
    };
  },

  methods: {
    fetch() {
      if (this.loading) return;
      this.loading = true;

      return TopService.getUpgradeRecord(this.query)
        .then((res) => {
          const { list, total } = res.data.data;
          this.listData = list;
          this.total = total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },

  created() {
    this.fetch();
  },
});
</script>

<style lang="scss">
.top-record {
  min-height: 300px;
  display: flex;
  flex-direction: column;
  height: 100%;

  > * {
    flex: none;
  }

  .pagination-wrapper {
    text-align: center;
  }
}

.status-success {
  color: rgb(163, 231, 161);
}

.status-fail {
  color: red;
}
</style>
